<template>
  <div class="profile">
    <v-tabs background-color="violet" v-model="tab">
      <v-tab>基本信息</v-tab>
      <v-tab>头像</v-tab>
      <v-tab>修改密码</v-tab>
    </v-tabs>

    <v-tabs-items v-model="tab">
      <v-form @submit.prevent>
        <v-tab-item>
          <v-row>
            <v-col :md="8" cols="12" sm="6">
              <v-text-field
                v-model="form.username"
                filled
                label="用户名"
                name="input-3-3"
              ></v-text-field>
              <v-textarea
                v-model="form.description"
                filled
                name="input-7-4"
                label="个人简介"
              ></v-textarea>
            </v-col>
          </v-row>
        </v-tab-item>
        <v-tab-item>
          <el-upload
            class="avatar-uploader"
            :action="upload_url"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="form.avatar" :src="form.avatar" class="avatar"/>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </v-tab-item>
        <v-tab-item>
          <v-row>
            <v-col :md="8" cols="12" sm="6">
              <v-text-field
                v-model="form.rawPassword"
                filled
                label="原密码"
                :rules="[rules.password]"
                type="password"
                name="input-3-3"
              ></v-text-field>
              <v-text-field
                v-model="form.newPassword"
                filled
                name="input-7-4"
                :rules="[rules.password]"
                @change="validateRePassowrd"
                :error-messages="pswError"
                type="password"
                @οncοpy="inValid"
                @oncut="inValid"
                @οnpaste="inValid"
                @οncοntextmenu="inValid"
                label="新密码"
              ></v-text-field>
              <v-text-field
                v-model="form.rePassword"
                filled
                name="input-7-4"
                :rules="[rules.password]"
                type="password"
                @change="validateRePassowrd"
                @οncοpy="inValid"
                @oncut="inValid"
                @οnpaste="inValid"
                @οncοntextmenu="inValid"
                :error-messages="pswError"
                label="确认新密码"
              ></v-text-field>
            </v-col>
          </v-row>
        </v-tab-item>
        <v-btn color="primary" type="submit" @click="updateUser">提交</v-btn>
      </v-form>
    </v-tabs-items>
  </div>
</template>

<script>
import {userRulesMixin} from '../../mixins/userRules'
export default {
  middleware: 'auth',
  mixins: [userRulesMixin],
  data() {
    return {
      tab: null,
      form: {
        username: '',
        description: '',
        avatar: '',
        rawPassword: '',
        newPassword: '',
        rePassword: '',
      },
      pswError: '',
      upload_url: process.env.NUXT_ENV_UPLOAD_URL,
    }
  },

  methods: {
    handleAvatarSuccess(res) {
      this.form.avatar = res.data.url
    },

    inValid() {
      return false
    },
    // 验证重复密码
    validateRePassowrd() {
      if (this.form.newPassword !== this.form.rePassword) {
        this.pswError = '新密码确认不统一'
      } else {
        this.pswError = ''
      }
    },

    async updateUser() {
      const userInfo = this.form
      if (
        this.form.rawPassword &&
        this.form.newPassword === this.form.rePassword &&
        this.form.newPassword !== ''
      ) {
        delete userInfo.rePassword
      } else {
        delete userInfo.rePassword
        delete userInfo.rawPassword
        delete userInfo.newPassword
      }
      const user = await this.$axios.$post('auth/user', userInfo)
      this.form = user.data
      this.$message.success('修改成功')
    },
  },
  computed: {
    userInfo() {
      return this.$store.state.auth.user
    },
  },
  created() {
    this.form = {...this.form, ...this.userInfo}
  },
}
</script>
<style lang="scss" scoped>
.profile {
  min-height: 500px;
  display: flex;
  flex-direction: column;

  .v-tabs {
    max-height: 50px;
  }

  .v-window {
    flex: 1;
    padding: 10px;
  }
}
</style>
